<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
  <button @click="fn">切换</button>
  <component :is="arr[index]"></component>
</div>
</body>
<script>
  new Vue({
    el: '#root',
    data: {
      index:0,
      arr:["one","two","three"]
    },
    methods:{
      fn(){
        if(++this.index>2) this.index=0
      }
    },
    components:{
      One:{
        template:(`
				    <p style="background:green;">one</p>
				`)
      },
      Two:{
        template:(`
				    <p style="background:red;">Two</p>
				`)
      },
      Three:{
        template:(`
				    <p style="background:pink;">Three</p>
				`)
      }
    }

  })
</script>
</html>